<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>2成绩查询-单科成绩-教师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{/*position: relative; */ height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.listWrap{ margin: 10px 0; overflow: hidden; }
.listSelect{ display: block;height: 50px; width: 100%; background:#fff; }
.listSelecValue{ float: left; margin-left: 15px; height: 50px;   line-height: 50px; font-size:15px;  color: #2f2f2f; }
.listSelectBtn{float:right; padding-right: 17px; margin-right: 15px; height: 50px;   line-height: 50px; font-size:15px; color: #d1d1d1; }
.listItems{ display: none; height: 200px; overflow:auto; }
.listItems a{ display: block; padding-left: 15px; height: 40px; line-height: 40px; font-size: 15px;color: #2f2f2f;  }
/*成绩信息内容*/
.chengjiWrap{ background: #fff;  }
/*历次成绩*/
.cj-table{ width: 100%; border: 1px solid #f3f4f9;  border-collapse:collapse; } 
.cj-table th{height: 38px; width: 125px; font-size: 15px; text-align: center; } 
.cj-table td{height: 38px; width: 125px; font-size: 13px; text-align: center; color: #666;} 
.cj-table td a{ color: #666;} 
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
/*模态框*/
/*模态框*/
.model{display: none; position: absolute;left:0;top:0; height: 100%; width: 100%; background: rgba(0,0,0,0.5) ;}
.model ul{padding:20px; width: 280px; height: 280px; border-radius: 5px; background: #fff;margin:100px auto; overflow-y: auto;}
.model li{ margin:2px 12px; float: left; width: 95px; height: 50px; line-height: 50px; padding-left: 28px;
                 background:url(../img/qx_03.png) left center no-repeat;background-size: 20px; font-size: 15px; }
.model .active{ background:url(../img/xz_03.png) left center no-repeat;background-size: 20px;  }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>
                      <span class="t-title">班级总成绩排名</span>  
                      <a  class="g-other"></a>
              </div>
             <!-- 内容区 -->
      	     <div class="weui-tab__bd page-wrap" >
                     <div class="listWrap" id="danke">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue">语文</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a href="###">语文</a></li>
                                 <li><a href="###">数学</a></li>
                                 <li><a href="###">英语</a></li>
                                 <li><a href="###">物理</a></li>
                                 <li><a href="###">化学</a></li>
                                 <li><a href="###">生物</a></li>
                           </ul>
                    </div>
                     <div class="listWrap" id="yuekao">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue">2018年01月月考</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a href="###">2018年01月月考</a></li>
                                 <li><a href="###">2018年02月月考</a></li>
                                 <li><a href="###">2018年03月月考</a></li>
                                 <li><a href="###">2018年04月月考</a></li>
                                 <li><a href="###">2018年05月月考</a></li>
                                 <li><a href="###">2018年06月月考</a></li>
                           </ul>
                    </div>
                    <div class="listWrap">
                           <a class="listSelect" href="###">
                                 <span class="listSelecValue" id="nji-val">高一(3)班</span>
                                 <span class="listSelectBtn g-up">请选择</span>
                           </a>
                           <ul class="listItems">
                                 <li><a class="nji-btn">高一年级</a></li>
                                 <li><a class="nji-btn">高二年级</a></li>
                                 <li><a class="nji-btn">高三年级</a></li>
                           </ul>
                    </div>
                    <!-- 成绩信息 -->
                    <div class="chengjiWrap">
                           <div class="chengjiCont">                                                         
                                    <table class="cj-table " border="1" id="cj-table">
                                          <thead>
                                                <tr>
                                                  <th>姓名</th>
                                                  <th>分数</th>
                                                  <th>班级排名</th>
                                                </tr>
                                          </thead>
                                          <tbody id="tbody">
                                              <!--   <tr>
                                                    <td><a href="4成绩查询-单科成绩-学生&家长.html">范大境</a></td>
                                                    <td>80</td>
                                                    <td>1</td>
                                                </tr> -->
                                          </tbody>
                                   </table>
                           </div>
                    </div>
                    <!-- 模态框 -->  
                    <!-- 将全部班级数据渲染在这里 -->
                    <div class="model">
                          <ul mytip = "高一年级">
                                <li class="active">12班</li>
                                <li>13班</li>
                                <li>1班</li>
                                <li>16班</li>
                                <li>12班</li>
                          </ul>
                          <ul mytip = "高二年级">
                                <li class="active">1班</li>
                                <li>2班</li>
                                <li>3班</li>
                                <li>4班</li>
                          </ul>
                          <ul mytip = "高三年级">
                                <li class="active">02班</li>
                                <li>03班</li>
                                <li>04班</li>
                                <li>05班</li>
                                <li>06班</li>
                          </ul>
                    </div>                  
      	    </div>  
</div>
</body>
<script>
 // 选择班级
$(".nji-btn").click(function(){
        var str = this.innerText;                                    //例如 :   高一年级
        var t = this;    
        $(".model").show();                                          //模态框显示
        $(".model").find("ul").hide();                            //初始影藏里面所有列表

        $(".model").find("ul").each(function(i,v){
             if( $(v).attr("mytip")== str ){                       //获取对应  mytip = "高一年级"  
                   $(v).show();                                           //让对应列表显示
             }
        })

        $(".model").find("li").click(function(){                        //点击模态框中列表单项后
              $(".model").find("li").removeClass("active");
              $(this).addClass("active");                                    //该项添加选中状态
              $("#nji-val").text( str+this.innerText );                 //例:    高一年级 + 12班
              $(".model").hide();                                               //模态框影藏
              $(t).parent().parent().hide();                                //下拉列表影藏
              $(t).parent().parent().prev().find(".listSelectBtn").removeClass("g-down").addClass("g-up");  //显示向上箭头标记
        })
 })



var arr = [
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"},
     { name:"范大静", num:85, n:1, href:"cheng4.html"}
];
var strarr = [];
$.each(arr, function(i,v){
     strarr.push(
          '<tr>'+
              '<td><a href="'+v.href+'">'+v.name+'</a></td>'+
              '<td>'+v.num+'</td>'+
              '<td>'+v.n+'</td>'+
          '</tr>'
      );
})
$("#tbody").html( strarr.join('') );


 
  // 选择项点击下拉效果
       $(".listSelectBtn").click(function(){
                if( $(this).hasClass("g-up")){
                       $(this).removeClass("g-up").addClass("g-down");
                       $(this).parent().next("ul").slideDown();
                }else{
                      $(this).removeClass("g-down").addClass("g-up");
                       $(this).parent().next("ul").slideUp();
                }
       });


     // 月考选择后
     $("#yuekao,#danke").find("li").click(function(){
          $(this).parent().hide();
          $(this).parent().prev().find(".listSelecValue").text( $(this).text() );
          $(this).parent().prev().find(".listSelectBtn").removeClass("g-down").addClass("g-up");
     })
    


    // // 选择班级模态框
    // var arr2 = ["12班" , "16班" ,"10班" ,"112班" ,"06班" ,"08班" ,"22班" ,"13班" ];
    // var str2="";
    // $.each(arr2, function(i,v){
    //     str2 += "<li>"+v+"</li>";
    // })
    // $(".model").find("ul").html(str2);

 





</script>
</html>